<template>
  <el-form :model="periodStore.currentPeriodDay" class="period-form card-item">
    <el-form-item>
      <template #label>
        <i class="fa-regular fa-calendar-check"></i>
        <span>日期</span>
      </template>
      <el-date-picker v-model="periodStore.currentPeriodDay.date"
                      type="date" :disabled="true"
                      style="width: 130px;"/>
    </el-form-item>

    <el-form-item>
      <template #label>
        <i class="fa-solid fa-pills"></i>
        <span>吃药</span>
      </template>

      <el-switch
          v-model="periodStore.currentPeriodDay.isDrug"
          inline-prompt
          style="--el-switch-on-color: #DE3163; --el-switch-off-color: #DED2D5"
          active-text="是" inactive-text="否"
      />
    </el-form-item>

    <el-form-item>
      <template #label>
        <i class="fa-solid fa-droplet"></i>
        <span>月经</span>
      </template>

      <el-switch
          v-model="periodStore.currentPeriodDay.isMenstruate"
          inline-prompt
          style="--el-switch-on-color: #DE3163; --el-switch-off-color: #DED2D5"
          active-text="是" inactive-text="否"
          @change="changeHasPeriodEvent"
      />
    </el-form-item>

    <el-form-item>
      <template #label>
        <i class="fa-solid fa-glass-water-droplet"></i>
        <span>流量</span>
      </template>

      <el-select v-model="periodStore.currentPeriodDay.flowLevel"
                 placeholder="请选择流量" style="width: 130px;"
                 :disabled="!periodStore.currentPeriodDay.isMenstruate">
        <el-option v-for="(item, index) in flowLevelList" :key="index"
                   :label="item" :value="item"/>
      </el-select>
    </el-form-item>

    <el-form-item label="症状">
      <template #label>
        <i class="fa-solid fa-disease"></i>
        <span>症状</span>
      </template>

      <el-select v-model="periodStore.currentPeriodDay.crampLevel"
                 placeholder="请选择症状" style="width: 130px;"
                 :disabled="!periodStore.currentPeriodDay.isMenstruate">
        <el-option v-for="(item, index) in crampLevel" :key="index"
                   :label="item" :value="item"/>
      </el-select>
    </el-form-item>

    <el-form-item label="爱爱">
      <template #label>
        <i class="fa-solid fa-shield-heart"></i>
        <span>爱爱</span>
      </template>

      <el-select v-model="periodStore.currentPeriodDay.sexActivity"
                 placeholder="请选择爱爱" style="width: 130px;"
                 :disabled="periodStore.currentPeriodDay.isMenstruate">
        <el-option v-for="(item, index) in sexActivity" :key="index"
                   :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>

    <el-form-item style="align-self: center;">
      <el-button type="primary" @click="onSubmit"
                 :disabled="isBeforeDate(formatDate(new Date()), periodStore.selectDate)">
        确认
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { usePeriodStore } from '@/store/period.ts'
import { formatDate, isBeforeDate } from 'vue3-common/utils/dateUtil'

const periodStore = usePeriodStore()

const flowLevelList = ['非常少量', '少量', '中量', '大量', '非常大量']
const crampLevel = ['完全不痛', '轻微痛', '比较痛', '非常痛', '通到极致']
const sexActivity = [{
  value: '',
  label: '无'
},
{
  value: '有措施',
  label: '有措施'
},
{
  value: '无措施',
  label: '无措施'
}]

const changeHasPeriodEvent = (value: boolean) => {
  if (value) {
    periodStore.currentPeriodDay.sexActivity = ''
  } else {
    periodStore.currentPeriodDay.flowLevel = ''
    periodStore.currentPeriodDay.crampLevel = ''
  }
}

const onSubmit = async () => {
  await periodStore.updatePeriodDay()
  periodStore.currentPeriodDay = periodStore.getPeriodDay(periodStore.selectDate)
}
</script>

<style lang="scss">
.period-form {
  padding: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;

  .el-form-item {
    justify-content: space-between;

    .el-form-item__label {
      display: grid;
      grid-template-columns: 20px 1fr;
      align-items: center;
      gap: 5px;

      i {
        font-size: 1.2rem;
        color: #DE3163;
      }
    }

    .el-form-item__content {
      flex: none;
    }
  }
}
</style>
